<template>
	<view class="pages" >
		<!-- <plublic-navbar :is-back="true" :title="title" :background="background"></plublic-navbar> -->
		<view class="u-flex header" :style="'padding-top:'+top/3+'px'">
			<view class="back u-flex u-row-center" @click="back">
				<u-icon name="home" size="18" color="#000000"></u-icon>
			</view>
			<view class="picker u-flex u-row-center">
				
				<text>朋友分享</text>
				<!-- <u-icon name="arrow-down-fill" size="14" color="#84929A"></u-icon> -->
			</view>
		</view>
	
		<view class="container u-relative" :style="'margin-top:50px'" v-if="list.length">
			<view class="userinfo u-abso">
				
				<view class="u-flex u-row-center">
					<u-image width="128rpx" height="128rpx" shape="circle" mode="scaleToFill" made="spacFit" :src="user.avatar"></u-image>
				</view>
				<text class="u-m-t-20 u-m-b-20">{{user.nickname}}</text>
			</view>
			<view class="u-flex u-row-between datainfo">
				<view class="u-border-right left  u-flex u-row-between">
					<text>历经</text>
					<view class="u-flex ali"><text class="big">{{info.day}}</text><text class="sml">天</text></view>
				</view>
				<view class="right u-flex u-row-between">
					<text>减重</text>
					<view class="u-flex">
						<u-image width="17rpx" height="40rpx" mode="scaleToFill" :src="list[1].weight > list[0].weight ?imgUrl+'service/down.png' : imgUrl+'service/up.png'"></u-image>
						<view class="u-flex ali u-m-l-30">
							<text class="big">{{info.weight}}</text>
							<text class="sml">kg</text>
						</view>
						
					</view>
				</view>
			</view>
			<view class="duibi">
				<view class="title">
					数据对比
				</view>
				<view class="table">
					<view class="stitle u-flex u-row-center">
						<text>{{list[1].dataDate}}</text>
						<u-image width="40rpx" height="40rpx" mode="scaleToFill" :src="imgUrl+'service/vs.png'"></u-image>
						<text>{{list[0].dataDate}}</text>
					</view>
					<view class="tr u-flex u-row-between">
						<view class="td big">
							<text class="big">体重</text>
						</view>
						<view class="td">
							<view class="u-flex ali u-m-l-30">
								<text class="big">{{list[1].weight}}</text>
								<text class="sml">kg</text>
							</view>
						</view>
						<view class="td">
							<view class="u-flex ali u-m-l-30">
								<text class="big">{{list[0].weight}}</text>
								<text class="sml">kg</text>
							</view>
						</view>
						<view class="td noborder">
							<view class="u-flex">
								<u-image v-if="Math.abs(list[1].weight - list[0].weight)" width="17rpx" height="40rpx" mode="scaleToFill" :src="list[1].weight > list[0].weight ?imgUrl+'service/down.png' : imgUrl+'service/up.png'"></u-image>
								<view class="u-flex ali u-m-l-30">
									<text class="big">{{Math.abs(list[1].weight - list[0].weight) || '持平'}}</text>
									<text class="sml" v-if="Math.abs(list[1].weight - list[0].weight)">kg</text>
								</view>
								
							</view>
						</view>
					</view>
					<view class="tr u-flex u-row-between">
						<view class="td big">
							<text class="big">BMI</text>
						</view>
						<view class="td">
							<view class="u-flex ali u-m-l-30">
								<text class="big">{{list[1].bmi}}</text>
							</view>
						</view>
						<view class="td">
							<view class="u-flex ali u-m-l-30">
								<text class="big">{{list[0].bmi}}</text>
							</view>
						</view>
						<view class="td noborder">
							<view class="u-flex">
								<u-image v-if="list[0].weight" width="17rpx" height="40rpx" mode="scaleToFill" :src="list[1].bmi > list[0].bmi ?imgUrl+'service/down.png' : imgUrl+'service/up.png'"></u-image>
								<view class="u-flex ali u-m-l-30">
									<text class="big">{{Math.abs(list[1].bmi - list[0].bmi).toFixed(2) || '持平'}}</text>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="u-p-t-30 plancontent" v-if="plan">
			<view class="table" v-if="isP">
				<view class="title">
					他的目标
				</view>
				<view class="tr u-flex u-row-between u-m-t-30">
					<view class="td u-flex u-row-between">
						<text>初始体重</text>
						<text class="num">{{plan.startWeight}}kg</text>
					</view>
					<view class="td u-flex u-row-between noborder">
						<text>{{plan.startWeight > plan.targetWeight?'减重':'增重'}}重量</text>
						<text class="num">{{Math.abs(plan.startWeight - plan.targetWeight).toFixed(1)}}kg</text>
					</view>
				</view>
				<view class="tr u-flex u-row-between">
					<view class="td u-flex u-row-between">
						<text>目标体重</text>
						<text class="num">{{plan.targetWeight}}kg</text>
					</view>
					<view class="td u-flex u-row-between noborder">
						<text>{{plan.startWeight > plan.targetWeight?'减重':'增重'}}周期</text>
						<text class="num">{{plan.targetDays}}天</text>
					</view>
				</view>
				<view class="tr u-flex u-row-between">
					<view class="td u-flex u-row-between ">
						<text>计划每天{{plan.startWeight > plan.targetWeight?'减重':'增重'}}</text>
						<text class="num">{{plan.pj}}kg</text>
					</view>
					<view class="td u-flex u-row-between noborder">
						<text>计划达成日期</text>
						<text class="num">{{plan.endtime}}</text>
					</view>
				</view>
			</view>
			<view class="shipu u-m-t-30" v-if="isF">
				<view class="title">
					健康饮食食谱推荐
				</view>
				<view class="item u-m-t-30" :style="'background-image:url('+plan.recipeDetails.icon+')'" @click="goPage('/pages/service/detail?id='+plan.recipeDetails.id)">
					<view class="li u-flex u-row-between">
						<view class="info">
							<view class="titles">
								{{plan.recipeDetails.title}}
							</view>
							<view class="desc">
								{{plan.recipeDetails.subTitle}}
							</view>
						</view>
						<!-- <u-image width="182rpx" height="182rpx" mode="scaleToFill"  radius="10rpx" made="spacFit" :src="plan.recipeDetails.icon"></u-image> -->
					</view>
		
					<!-- </navigator> -->
				</view>
				<!-- <view class="content u-m-t-20">
						{{plan.recipeDetails.details}}
						16+8轻断食‌是一种限时进食法（Time-Restricted Eating, TRE），指每天将进食时间压缩至8小时内，其余16小时保持空腹（仅可饮水或无热量饮品），旨在通过调节代谢实现减重或改善健康。
					</view> -->
			</view>
			<view class="shengming u-m-t-30">
				<view class="title">
					免责声明
				</view>
				<view class="content u-m-t-30">
					<u-parse :content="content" :tagStyle="style"></u-parse>
				</view>
			</view>
		</view>
		
		
	<!-- 	<button class="button" open-type="share">
			分享
		</button> -->
	</view>
</template>

<script>
	import {loginUrl} from '../../common/mixin.js';
		import {getShare} from '../../common/api.js';
	export default {
		mixins: [loginUrl],
		data() {
			return {
				imgUrl: uni.$u.http.config.imgURl,
				background: 'transparent',
				title: '朋友分享',
				top: 0,
				show: false,
				rq: "",
				show4: false,
				value4: "",
				list:[],
				userinfo:uni.getStorageSync('userInfo'),
				user:{
					avatar:'',
					nickname:''
				},
				info:{
					day:0,
					weight:0
				},
				uid:'',
				shareType:'',
				sharId:'',
				plan:'',
				isP:false,
				isF:false,
				style: {
						// 字符串的形式
						p: 'font-size:28rpx !important',
						span: 'font-size: 28rpx !important; line-height:1.6 !important'
					},
					content: "1、如果你已知的健康问题，如高血压、高血脂等慢性疾病、怀孕或哺乳等，请您咨询医疗专业人士的意见；\n 2、使用我们的服务即表示您同意自行承担风险。我们不对任何直接、间接、福袋、特殊或后果性的损害负责，包括但不限于因使用我们的服务而导致的健康问题、损害或损失。"
				
			}
		},

		
		onLoad(option) {
			console.log(option)
			let that = this
			that.uid=option.uid
			that.shareType=option.shareType
			that.sharId=option.sharId
			if(that.shareType == 3){
				that.isF = true
				that.isP = true
			}
			if(that.shareType == 1){
				that.isF = true
			}
			if(that.shareType == 2){
				that.isP = true
			}
			that.getShareInfo()   
			// 返回绝对值（确保正数）

			uni.getStorage({
				key: 'top',
				success: function(res) {
					that.top = res.data;
					console.log(res.data);
				}
			});
		},
		methods: {
			back(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},

			async getShareInfo(){
				
			
				let infos={
					id : this.sharId
				}
	
				await getShare({params:infos}).then(res=>{
					let data = JSON.parse(res.shareData)
					console.log(data)
					console.log(data.memberAvatar)
					let dbsj = data.dbsj
					this.list = JSON.parse(dbsj)
					
					let abc = new Date(this.list[0].dataDate) - new Date(this.list[1].dataDate)
					
					  
					
					let newList=[]
					if(abc < 0){
						newList.push(this.list[1])
						newList.push(this.list[0])
						this.list = newList
					}
					
					const end = new Date(this.list[0].dataDate);
					const start = new Date(this.list[1].dataDate);
					
					// 计算相差的毫秒数
					const timeDifference = end.getTime() - start.getTime();
					
					// 将毫秒转换为天数（1000毫秒 * 60秒 * 60分钟 * 24小时）
					const daysDifference = timeDifference / (1000 * 3600 * 24);
					this.info.day = Math.abs(daysDifference)
					this.info.weight = Math.abs(this.list[0].weight - this.list[1].weight)
					
					
					this.user.avatar= data.memberAvatar
					this.user.nickname= data.memberName
				
					
					if(data.plan){
						this.plan=data.plan
						let endtime = Number(this.plan.startTime) + Number(this.plan.targetDays) * 24 * 60 * 60 * 1000
						this.plan.endtime = uni.$u.timeFormat(endtime, 'mm/dd');
						
						let pj = Math.abs(this.plan.startWeight - this.plan.targetWeight) / this.plan.targetDays
						this.plan.pj = pj.toFixed(1)
					}
					// this.goPage(url)
				})
			},
			goPage(e){
				if(this.isLogin(e)){
					this.globals.linkJump({
					  url:e,
					  callback: () => {
					    uni.setStorageSync('pagelist',e)
					  }
					});
					// uni.navigateTo({
					// 	url: e
					// })
				}
			
			},
		}
	}
</script>

<style lang="scss">
	.header{
		position: fixed;
		top: 0;
		left:0;
		z-index: 999999;
		width: 100%;
		background: #ffffff;
		padding-bottom: 30rpx;
	}
	.back{
		width:70rpx;
		display: flex;
		justify-content: center;
		height: 60rpx;
	}
	.picker{
		width: calc(100% - 90rpx);
		text-align: center;
		text{
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			font-style: normal;
		}
	}
	page{
		height: 100%;
		background: #F5F5F5;
		// background-image: url('/static/apps/service/bg.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		padding-bottom: 50rpx;
	}


	.pages {
		padding: 0 30rpx;
		box-sizing: border-box;
		// background: #F5F5F5;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		
	}
	.container{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding-top: 150rpx;
		.userinfo{
			width: 100%;
			left:0;
			top: -50rpx;
			text-align: center;
		}
		.datainfo{
			height: 100rpx;
			line-height: 100rpx;
			border-top:#f2f2f2 solid 1rpx;
			border-bottom:#f2f2f2 solid 1rpx;
			text{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			
				text-align: left;
				font-style: normal;
			}
			.big{
				font-weight: 600;
				font-size: 48rpx;
				color: #333333;
			
				text-align: right;
				font-style: normal;
			}
			.sml{
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
			
				text-align: right;
				font-style: normal;
			}
			.left{
				width: 50%;
				padding: 0 20rpx;
			}
			.right{
				width: 50%;
				padding: 0 20rpx;
			}
		}
		.duibi{
			.title{
				line-height: 120rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				border-bottom: #f2f2f2 solid 1rpx;
				text-align: center;
				font-style: normal;
			}
			.stitle{
				padding: 30rpx 0;
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
				text{
					padding: 0 20rpx;
				}
			}
		}
		.table{
			
			.tr{
				line-height: 80rpx;
				
				border-top: #f2f2f2 solid 1rpx;
				.td{
					border-right: #f2f2f2 solid 1rpx;
					padding: 0 40rpx;
					width: 25%;
					.big{
						font-weight: 600;
						font-size: 28rpx;
						color: #333333;
						font-style: normal;
					}
					.sml{
						font-weight: 600;
						font-size: 24rpx;
						color: #333333;
						font-style: normal;
					}
				}
				.noborder{
					border: none;
				}
			}
		}
	}


	.tips {
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 33rpx;
		text-align: center;
		font-style: normal;
		padding: 0 40rpx;
	}
	.checkDate{
		text{
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
			text-align: center;
			font-style: normal;
		}
	}
	.listbox{
		padding-bottom: 120rpx;
		.item{
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx 50rpx 20rpx 30rpx;
			margin-bottom: 30rpx;
			.big{
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
				text-align: center;
				font-style: normal;
			}
			.sml{
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 33rpx;
				text-align: center;
				font-style: normal;
			}
			
		}
	}
	.ali{
		align-items: baseline;
	}
	.button{
		// position: fixed;
		// bottom: 20rpx;
		// left: 10%;
		z-index: 9;
		height: 88rpx;
		background: #25D59F;
		border-radius: 69rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
		width: 80%;
		margin: 0 auto;
		margin-top: 50rpx;
	}
	.plancontent{
		.title {
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
			line-height: 1;
			text-align: left;
			font-style: normal;
			padding-left: 20rpx;
		}
		
		.title::before {
			width: 9rpx;
			height: 25rpx;
			background: #25D59F;
			border-radius: 5rpx;
			position: absolute;
			left: 0rpx;
			top: 2rpx;
			content: "";
			z-index: 1;
		
		}
		
		.table {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
		
			.tr {
				border-top: #f2f2f2 solid 1rpx;
		
				.td {
					width: 50%;
					height: 100rpx;
					line-height: 100rpx;
					padding: 0 30rpx;
					border-right: #f2f2f2 solid 1rpx;
		
					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
					}
		
					.num {
						font-weight: 600;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						text-align: right;
						font-style: normal;
					}
				}
			}
		}
		
		.shipu {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
		
			.item {
				width: 100%;
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				// background: #FEF3C6;
				border-radius: 10rpx;
		
				padding: 50rpx 20rpx;
				margin-bottom: 20rpx;
		
				.li {
					width: 100%;
					overflow: hidden;
		
					.titles {
						font-weight: 600;
						font-size: 36rpx;
						color: #333333;
						line-height: 50rpx;
						text-align: left;
						font-style: normal;
					}
		
					.desc {
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						line-height: 37rpx;
						text-align: left;
						font-style: normal;
					}
				}
		
			}
		
			.content {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
			}
		}
		
		.shengming {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
		}
		
		.ali {
			align-items: flex-end;
		}
		
		.noborder {
			border: none !important;
		}
	}
	</style>